<template>
	<view class="loginPassword">
		<view class="main">
			<view class="userInfoBox">
				<view class="userInfo">
					<image class="avatar" :src="userInfo.avatar"></image>
					<view>
						<view>
							{{ userInfo.username }}
						</view>
						<view class="uid-wrap">
							<text>Uid:{{userInfo && userInfo.id}}</text>
							<view class="copy" @tap="handleCopy">
								<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="20"
									color="#fff"></uni-icons>
							</view>
						</view>
						<view>
							{{ userInfo.level && userInfo.level.name }}
						</view>
					</view>
				</view>
				<match-media :min-width="MAX_SIZEiZE" class="levelImage">
					<adaptCar :src="userInfo.level.image" :paddingTop="'75%'"></adaptCar>
				</match-media>
			</view>
		</view>
		<!-- <view class="bottom">
			<waves class="saveBtn" @onTap="submit">Save</waves>
		</view> -->
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		mapState,
	} from 'vuex'
	import {
		showToast
	} from '@/utils/common.js'
	import {
		MAX_SIZEiZE
	} from "@/common/app.js"

	import {
		uploadAvatar
	} from '@/api/uploadFile.js'
	export default {
		data() {
			return {
				MAX_SIZEiZE,
				// 表单数据
				formData: {
					oldPassword: '',
					newPassword: '',
					confirmNewPassword: '',
				},
				rules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: 'Password can not be blank',
						}]
					},
					newPassword: {
						rules: [{
							required: true,
							errorMessage: 'Password can not be blank',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (data.newPassword !== data.confirmNewPassword) {
									console.log(rule, value, data)
									callback('The new and old passwords need to be consistent')
								}
								if ((data.newPassword && data.confirmNewPassword) && data.newPassword === data
									.confirmNewPassword) {
									this.$refs.confirmNewPassword.onFieldChange(data.confirmNewPassword)
								}
								return true
							}
						}]
					},
					confirmNewPassword: {
						rules: [{
							required: true,
							errorMessage: 'Password can not be blank',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (data.newPassword !== data.confirmNewPassword) {
									console.log(rule, value, data)
									callback('The new and old passwords need to be consistent')
								}
								if ((data.newPassword && data.confirmNewPassword) && data.newPassword === data
									.confirmNewPassword) {
									this.$refs.newPassword.onFieldChange(data.newPassword)
								}
								return true
							}
						}]
					}
				}
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.app.userInfo,
			}),
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						const params = {
							id: this.userInfo.id
						}

						uni.uploadFile({
							url: 'http://192.168.1.202:8088/api/index/uploadavatar', //仅为示例，并非真实接口地址。
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								id: this.userInfo.id
							},
							success: res => {
								console.log("res: ", res);
							},
							complete: () => {
								console.log("complete: ");
							}
						});
						// const result = await uploadAvatar(params)
						// console.log("result: ", result);
					}
				})
			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.changePassword()
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			changePassword() {
				const {
					FORGET
				} = this.$api
				sendMessage({
					flag: FORGET,
					content: {
						username: this.userInfo.username,
						password: this.formData.oldPassword,
						newpassword: this.formData.confirmNewPassword,
					}
				})
				uni.$once(FORGET, (res) => {
					const {
						code,
						data
					} = res
					console.log('FORGET-FORGET-FORGET', res)
					if (code === 1) {}
				})
			},

			/**
			 * 复制Uid
			 */
			handleCopy() {
				uni.setClipboardData({
					data: String(this.userInfo.id), //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: this.$t('Page.component.fzcg'),
							icon: 'none'
						})
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.loginPassword {
		border: 1px solid #2b333b;
		border-radius: 0.5rem;
		margin-top: 8px;
		margin-bottom: 8px;
		padding-top: 16px;

		.title {
			font-weight: 900;
			margin-left: 24px;
			margin-right: 24px;
			border-bottom: 1px solid #2b333b;
			padding-bottom: 8px;
		}

		.main {
			font-size: 14px;
			font-weight: 700;
			padding: 13px 16px;
			margin-top: 8px;
			margin-bottom: 8px;

			.userInfoBox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.userInfo {
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 14px;

					.avatar {
						width: 80px;
						height: 80px;
						border-radius: 50%;
						margin-right: 10px;
						cursor: pointer;
					}

					.uid-wrap {
						display: flex;
						align-items: center;

						.copy {
							width: 45px;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 5px;
							background: transparent;
							box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
							margin-left: 5px;
							cursor: pointer;
						}

						.copy:hover {
							background: rgba(0, 0, 0, 0.1);
							transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
						}
					}
				}

				.levelImage {
					margin-right: 20px;
					width: 55px;
				}
			}
		}

		.bottom {
			border-top: 1px solid #2b333b;
			display: flex;
			justify-content: flex-end;
			padding-left: 16px;
			padding-right: 16px;
			padding-top: 8px;
			padding-bottom: 8px;

			.saveBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 3px;
				color: #fff;
				background: #33c38f;
				padding: 0 36px;
			}
		}
	}
</style>